<template>  
  <div id="printGuide">
        <img class="back" src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
         <!--轮播图-->
        <section  class="tab">
            <p @click="openIos" :class="{active:isActive}"><span>IOS</span></p>
            <p @click="openAndroid" :class="{activeCo:isActiveCo}"><span>Android</span></p>
        </section>
        <div>
            <mt-swipe id="head" :auto="0" v-show="ios">
                <mt-swipe-item><img src="../../assets/tabber/ios/ios 1.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/ios/ios no.1.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/ios/ios no.2.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/ios/ios no.3.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/ios/ios no.4.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/ios/ios no.5.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/ios/ios no.6.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/ios/ios no.7.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/ios/ios end.png" alt=""></mt-swipe-item>
            </mt-swipe>
            <mt-swipe id="head" :auto="0" v-show="android">
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.1.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.2.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.3.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.4.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.5.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.6.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.7.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.8.png" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/tabber/android/Android no.end.png" alt=""></mt-swipe-item>
            </mt-swipe>
            
        </div>
        
  </div>
</template>


<script>
export default {
  data() {
    return {
        isActive:true,
        isActiveCo:false,
        ios:true,
        android:false,
    };
  },
  mounted() {
    
  },
  methods: {
      openIos(){
        this.ios=true;
        this.android=false;
        this.isActive=true;
        this.isActiveCo=false;
      },
      openAndroid(){
        this.ios=false;
        this.android=true;
        this.isActive=false;
        this.isActiveCo=true;
      }
  }
};
</script> 
  
<style>
#printGuide{
  height:100%;
  width:100%;
  background-size:100%;
  background-image:url(../../assets/tabber/background.png);
}
#printGuide .back{
  height:1rem;
  width:0.6rem;
  margin:0.8rem 0.6rem;  
}
#printGuide .tab{
  display:flex;
  width:70%;
  text-align:center;
  margin:1rem auto;
  height:4vh;
  color: #29a193;
  line-height:4vh;
}
#printGuide .tab > p:nth-child(1){
  width:50%;
  border-right:0.08rem solid #29a193;
}
#printGuide .tab > p{
  width:50%;
}
#printGuide #head{
  height:80vh;
  width:100%;
}
#printGuide #head img{
    height:100%;
    width:100%;
}
#printGuide .active > span{
    border-bottom:1px solid #29a193
}
#printGuide .activeCo > span{
    border-bottom:1px solid #29a193
}
</style>